<template>
  <div class="middle-section">
    <el-button-group>
      <el-button
        v-for="tab in tabs"
        :key="tab.id"
        :type="activeTab === tab.id ? 'primary' : ''"
        @click="handleTabClick(tab.id)"
      >
        {{ tab.title }}
      </el-button>
    </el-button-group>

    <!-- 动态内容区域 -->
    <div class="dynamic-content" :style="{ height: computedA4Height }">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        v-show="activeTab === tab.id"
        class="content-panel"
      >
        <div class="a4-preview">
          <div class="a4-content" v-html="getTabContent(tab.id)"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlutoTabs',
  props: {
    // Tab配置数组
    tabs: {
      type: Array,
      default: () => [
        {
          id: 'approval',
          title: '有关事项审批表'
        },
        {
          id: 'punishment',
          title: '行政处罚事先告知书'
        }
      ]
    },
    // 默认激活的tab
    defaultActive: {
      type: String,
      default: ''
    },
    // A4区域高度
    a4Height: {
      type: [String, Number],
      default: 500
    }
  },
  data() {
    return {
      activeTab: this.defaultActive || (this.tabs.length > 0 ? this.tabs[0].id : ''),
      tabContents: {} // 存储tab内容
    }
  },
  computed: {
    computedA4Height() {
      return typeof this.a4Height === 'number' ? `${this.a4Height}px` : this.a4Height;
    }
  },
  watch: {
    tabs: {
      handler(newTabs) {
        if (newTabs.length > 0 && !this.activeTab) {
          this.activeTab = newTabs[0].id;
        }
      },
      immediate: true
    },
    defaultActive(newVal) {
      if (newVal) {
        this.activeTab = newVal;
      }
    }
  },
  methods: {
    handleTabClick(tabId) {
      this.activeTab = tabId;
      // 触发tab切换事件，父组件可以监听这个事件来加载内容
      this.$emit('tab-change', tabId);
    },

    // 设置tab内容
    setTabContent(tabId, htmlContent) {
      this.$set(this.tabContents, tabId, htmlContent);
    },

    // 获取tab内容
    getTabContent(tabId) {
      return this.tabContents[tabId] || '<div class="loading">内容加载中...</div>';
    },

    // 批量设置内容
    setContents(contents) {
      Object.keys(contents).forEach(tabId => {
        this.$set(this.tabContents, tabId, contents[tabId]);
      });
    },

    // 获取当前激活的tab
    getActiveTab() {
      return this.activeTab;
    },

    // 获取所有内容
    getAllContents() {
      return this.tabContents;
    }
  }
}
</script>

<style scoped>
.middle-section {
  //margin: 15px 0;
}

.dynamic-content {
  margin-top: 15px;
  background: #fafafa;
  overflow: hidden; /* 隐藏外层溢出 */
}

.content-panel {
  height: 100%;
}

.a4-preview {
  height: 100%;
   background: white;
   border-radius: 4px;
  padding: 0 0 40px 20px;

  overflow: hidden; /* 隐藏中间层溢出 */
}

.a4-content {
  height: 100%;
  overflow-y: auto; /* 内容区域滚动 */
  box-sizing: border-box; /* 包含padding在高度内 */
}




.a4-content {
  scrollbar-width: thin;
  scrollbar-color: linear-gradient(180deg, #409EFF, #66b1ff) #f5f7fa;
}

.a4-content::-webkit-scrollbar {
  width: 8px;
}

.a4-content::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 4px;
}

.a4-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #409EFF, #66b1ff);
  border-radius: 4px;
  border: 1px solid #f5f7fa;
}

.a4-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #337ecc, #529ae6);
}








/* 加载状态样式 */
.loading {
  text-align: center;
  color: #999;
  padding: 50px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-button-group {
    display: flex;
    flex-wrap: wrap;
  }

  .el-button-group .el-button {
    flex: 1;
    min-width: 120px;
  }

  .a4-content {
    padding: 15px;
  }
}
</style>

<style>
/* 为动态HTML内容添加样式 */
.dynamic-content :deep(.content-panel) h4 {
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 10px;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.dynamic-content :deep(.content-panel) .form-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.dynamic-content :deep(.content-panel) .form-row label {
  width: 100px;
  text-align: right;
  line-height: 32px;
  color: #606266;
  font-size: 14px;
  flex-shrink: 0;
}

.dynamic-content :deep(.content-panel) .preview-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed #f0f0f0;
}

.dynamic-content :deep(.content-panel) .preview-item .label {
  font-weight: 500;
  color: #666;
}

.dynamic-content :deep(.content-panel) .preview-item .value {
  color: #333;
}
</style>
